<template>
   <div class="n-cmt">
          <div class="tips" v-if="tipsFlag">
      <span>{{ tipstext }}</span>
    </div>
         <div class="u-title clearfix">
        <h3>评论</h3>
        <span class="sub"
          >共<span>{{ total }}</span
          >条评论</span
        >
      </div>
      <div class="m-cmmt">
        <div class="iptarea clearfix">
          <div class="head1">
            <img
              src="http://p4.music.126.net/HCgSbKvb_ukobEYTXa3B_Q==/1371091004159050.jpg?param=50y50"
              alt=""
            />
          </div>

          <div class="u-txtwrap">
            <textarea
              name="u-txt"
              id="text-f"
              ref="textarea"
              v-model="text_data"
              placeholder="评论"
             @mousedown.prevent="testing" ></textarea>
              <!-- <div class="off-focus"></div> -->
          </div>
          <div class="f-c clearfix">
            <a href="javascript:;" @mousedown="submit">评论</a>
            <span class="zs">{{140 - text_data.length }}</span>
          </div>
          <div class="corr">
            <em class="arrline">◆</em>
            <span class="arrclr">◆</span>
          </div>
        </div>
        <!-- 精彩评论区 -->
        <div v-if="marvellous_flat">
          <div class="com_box">
            <div class="separate" v-if="this.hotComments.length != 0"><h4>精彩评论</h4></div>
            <div class="cmmts" v-for="(el,index) in hotComments" :key="el.commentId">
              <div class="itm">
                <div class="head">
                  <a href="javascript:;">
                    <img :src="el.user.avatarUrl + '?param=50y50'" alt="" />
                  </a>
                </div>
                <div class="cntwrap">
                  <div class="cnt1">
                    <a href="javascript:;" class="s-fc">{{
                      el.user.nickname
                    }}</a>
                    ：{{ el.content }}
                  </div>
                  <div class="ReplyArea" v-show="el.beReplied.length">
                    <a href="javascript:;" class="s-fc7">{{
                      el.beReplied.length != 0
                        ? el.beReplied[0].user.nickname
                        : ""
                    }}</a>
                    ：{{
                      el.beReplied.length != 0 ? el.beReplied[0].content : ""
                    }}
                  </div>
                  <div class="cnt2 clearfix">
                    <span class="time">{{ el.time | formatTime1 }}</span>
                    <div class="r-zan clearfix">
                      <a href="javascript:;" class="zan" v-if="el.likedCount" @mousedown="zan(el.liked,el.commentId,index,false)">
                        <i class="iconzan" :style="el.liked?zan_bg:''"></i>
                        <span class="zanNum" v-if="el.likedCount"
                          >({{ el.likedCount }})</span
                        >
                      </a>
                      <span class="sep">|</span>
                      <a
                        href="javascript:;"
                        class="reply"
                        @mousedown="click_reply(el.commentId, el.user.nickname)"
                      >
                        回复
                      </a>
                    </div>
                  </div>
                  <div class="rept" v-if="el.commentId == comflag">
                    <div class="iner">
                      <div class="txtwrap">
                        <textarea
                          name="text"
                          id="auto-id"
                          v-model="ReplyText"
                        ></textarea>
                      </div>
                      <div class="b-f clearfix">
                        <a
                          href="javascript:;"
                          @mousedown="click_Submit(el.commentId)"
                          >回复</a
                        >
                        <span class="words">{{140 - ReplyText.length}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 最新评论区 -->
          <div class="separate"><h4>最新评论({{total}})</h4></div>

        </div>

        <div class="cmmts" v-for="(el,index) in comment" :key="el.commentId">
          <div class="itm">
            <div class="head">
              <a href="javascript:;">
                <img :src="el.user.avatarUrl + '?param=50y50'" alt="" />
              </a>
            </div>
            <div class="cntwrap">
              <div class="cnt1">
                <a href="javascript:;" class="s-fc">{{ el.user.nickname }}</a>
                ：{{ el.content }}
              </div>
              <div class="ReplyArea" v-show="el.beReplied.length">
                <a href="javascript:;" class="s-fc7">{{
                  el.beReplied.length != 0 ? el.beReplied[0].user.nickname : ""
                }}</a>
                ：{{ el.beReplied.length != 0 ? el.beReplied[0].content : "" }}
              </div>
              <div class="cnt2 clearfix">
                <span class="time">{{ el.time | formatTime1 }}</span>
                <div class="r-zan clearfix"> 
                  <a href="javascript:;" class="zan" :style="el.liked?zan_bg:''" @mousedown="zan(el.liked,el.commentId,index,true)">
                    <i class="iconzan" :style="el.liked?zan_bg:''"></i>

                    <span class="zanNum" v-if="el.likedCount"
                      >({{ el.likedCount }})</span
                    >
                  </a>
                  <span class="sep">|</span>
                  <a
                    href="javascript:;"
                    class="reply"
                    @mousedown="click_reply(el.commentId, el.user.nickname)"
                  >
                    回复
                  </a>
                </div>
              </div>

              <div class="rept" v-if="el.commentId == comflag">
                <div class="iner">
                  <div class="txtwrap">
                    <textarea
                      name="text"
                      id="auto-id"
                      v-model="ReplyText"
                     ></textarea>
                    
                  </div>
                  <div class="b-f clearfix">
                    <a
                      href="javascript:;"
                      @mousedown="click_Submit(el.commentId)"
                      >回复</a
                    >
                    <span class="words">{{140 - ReplyText.length}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <!-- 页码区 -->
      <div v-if="Math.ceil(total / 20) > 9">
        <div class="u-page">
          <a href="javascript:;" class="zbtn" @mousedown="jump(Turn_pages - 1)"
            :style="Turn_pages == 1? Turn_type1:''">上一页</a
          >
          <a href="javascript:;" class="zpgi" @mousedown="jump(1,1)" :style="1 == page_stype?page_stype_bg:''">1</a>
          <span v-if="page > 5">...</span>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 3,2)" :style="2 == page_stype?page_stype_bg:''">{{
            page - 3
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 2,3)" :style="3 == page_stype?page_stype_bg:''">{{
            page - 2
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page - 1,4)" :style="4 == page_stype? page_stype_bg:''">{{
            page - 1
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page,5)" :style="5 == page_stype? page_stype_bg:''">{{
            page
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 1,6)" :style="6 == page_stype? page_stype_bg:''">{{
            page + 1
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 2,7)" :style="7 == page_stype? page_stype_bg:''">{{
            page + 2
          }}</a>
          <a href="javascript:;" class="zpgi" @mousedown="jump(page + 3,8)" :style="8 == page_stype? page_stype_bg:''">{{
            page + 3
          }}</a>

          <span v-if="marvellous_flat1">...</span>
          <a
            href="javascript:;"
            class="zpgi"
            @mousedown="jump(Math.ceil(total / 20),9)"
             :style="9 == page_stype? page_stype_bg:''">{{Math.ceil(total / 20)}}</a
          >
          <a href="javascript:;" class="znxt" @mousedown="jump(Turn_pages - 1)"
            :style="Turn_pages == Math.ceil(total / 20)? Turn_type2:'' ">下一页</a
          >
        </div>
      </div>
      <div v-if="Math.ceil(total / 20) <= 9 && Math.ceil(total / 20) > 1">
        <div class="u-page">
          <a href="javascript:;" class="zbtn" @mousedown="jump(Turn_pages - 1)" :style="Turn_pages == 1? Turn_type1:''">上一页</a>
          <a
            href="javascript:;"
            class="zpgi"
            v-for="index in Math.ceil(total / 20)"
            :key="index"
            @mousedown="jump(index)" :style="index == page_stype?page_stype_bg:''">{{ index }}</a
          >
          <a href="javascript:;" class="znxt" @mousedown="jump(Turn_pages - 1)" :style="Turn_pages == Math.ceil(total / 20)? Turn_type2:'' ">下一页</a>
        </div>
      </div>
   </div>
</template>

<script>
import axios from 'axios';

export default {
        name:'CommentArea',
        data(){
           return {
             m_id:'',
           
            total: "",
            text_data:"",
            str:'',
            type_num:'',
            marvellous_flat: true,
            marvellous_flat1: true,
            
      Turn_pages: 1,
      Turn_type1:{
        backgroundPosition:'0 -620px',
        color:'#cacaca',
        cursor:'default',
        
       
      },
      Turn_type2:{
        backgroundPosition:'-75pX -620px',
        color:'#cacaca',
        cursor:'default'
      },
      zan_bg:{
         backgroundPosition:'-170px 0' 
      },
      page_stype:1,
      page_stype_bg:{
        backgroundPosition:'0 -650px',
        borderColor:'#A2161B',
        color:'#fff',
        cursor:'default'
      }, 
       hotComments:[],
        ReplyText:"",
        comment: [],
        comflag:'',
        tipstext:'',
        tipsFlag:false,
        page:5,   
      }

    },
        methods:{
           submit() {
      if (this.text_data.length <= 140 && this.text_data.length > 0) {
        axios.get("http://localhost:8080/api/comment", {
          params: {
            t: "1",
            type: this.type_num,
            id: this.m_id,
            content: this.text_data,
          },
          headers: {
            withCredentials: true,
          },
        });

        this.text_data = "";
         clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "评论成功";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      } else if (this.text_data.length > 140) {
        clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "输入不能超过140个字符";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      } else {
        clearTimeout(this.tipsset);
        this.tipsFlag = true;
        this.tipstext = "输入点内容在提交吧";
        this.tipsset = setTimeout(() => {
          this.tipsFlag = false;
        }, 2000);
      }
    },
    click_reply(index, name) {
 

        if (this.$store.state.signIn) {
                 this.comflag = index;
      this.ReplyText = "回复" + name + ":";
      this.contrast = "回复" + name + ":";
          }else {
            this.$bus.$emit('sign_state',true)
          }
    },
    click_Submit(value) {
      
      if (this.ReplyText.length <= 140) {
        if (this.ReplyText.slice(0, this.contrast.length) == this.contrast) {
          this.comflag = -1;
          axios
            .get("http://localhost:8080/api/comment", {
              params: {
                t: "2",
                type: this.type_num,
                id: this.m_id,
                content: this.ReplyText.slice(this.contrast.length, 140),
                commentId: value,
              },
              headers: {
                withCredentials: true,
              },
            })
            .then(
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "回复成功";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              },
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "回复失败";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              }
            );
        } else if (this.ReplyText.length != "") {
          
          this.comflag = -1;
            axios
            .get("http://localhost:8080/api/comment", {
              params: {
                t: "1",
                type: this.type_num,
                id: this.m_id,
                content: this.ReplyText
                
              },
              headers: {
                withCredentials: true,
              },
            })
            .then(
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "评论成功";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              },
              () => {
                clearTimeout(this.tipsset);
                this.tipsFlag = true;
                this.tipstext = "评论失败";
                this.tipsset = setTimeout(() => {
                  this.tipsFlag = false;
                }, 2000);
              }
            );
        } else {
          clearTimeout(this.tipsset);
          this.tipsFlag = true;
          this.tipstext = "输入点内容在提交吧";
          this.tipsset = setTimeout(() => {
            this.tipsFlag = false;
          }, 2000);
        }
      }
    },
    jump(value,index) {
      
      if (value > 0 && value <= Math.ceil(this.total / 20) ) {
      if (value >= 5) {
        if (value <= Math.ceil(this.total / 20) - 5) {
          this.page = value;
          this.marvellous_flat1 = true;
          
        } else {
          this.page = Math.ceil(this.total / 20) - 4;
          this.marvellous_flat1 = false;
        }
        //改变页码
      }else {
         this.page = 5;
      } 

      if (value == 1) {
        this.page = 5;
        this.marvellous_flat = true;
      } else {
        this.marvellous_flat = false;
      }

      
      
        this.Turn_pages = value;
         axios
        .get("http://localhost:8080/api" + this.str + '?' + Date.now(), {
          params: {
            id: this.m_id,
            limit: "20",
            offset: (this.Turn_pages - 1) * 20,
          },
        })
        .then((response) => {
          this.comment = response.data.comments;
        });
        
      }
     if (value <= 5) {
          this.page_stype = value;
     }else if(value >= Math.ceil(this.total / 20) - 3) {
       
      this.page_stype = index;
     }else {
         this.page_stype = 5;
     }
     
     
    },
    zan(value,data,index,flag){
         
          if (this.$store.state.signIn) {
                  
       axios.get('http://localhost:8080/api/comment/like' + '?' + Date.now(),{
           params:{
            id:this.m_id,
            cid:data,
            t:value?'0':'1',
            type:this.type_num,
         }
       })
       .then( 
         () => {

               if (flag) {
                 if (value) {

                 this.comment[index].likedCount = this.comment[index].likedCount - 1;
                    }else {
                this.comment[index].likedCount = this.comment[index].likedCount + 1;
              }
             this.comment[index].liked = !value;

               }else {

                 if (value) {
                 this.hotComments[index].likedCount = this.hotComments[index].likedCount - 1;
              }else {
                this.hotComments[index].likedCount = this.hotComments[index].likedCount + 1;
              }
             this.hotComments[index].liked = !value;

               }

      
     
       } 
       )
          }else {
            this.$bus.$emit('sign_state',true)
          }     
 

    },
    testing(){
 
          if (this.$store.state.signIn) {
             this.$refs.textarea.focus();
          }else {
            this.$bus.$emit('sign_state',true)
          }

        
    }     
  
        
        
   
     

    
    
       
    },
 
    watch:{
        m_id(value) {
          
        axios
        .get("http://localhost:8080/api" + this.str  + "?" + Date.now(), {
          params: {
            id: value,
            limit: "20",
          },
        })
        .then((response) => {
         
          this.comment = response.data.comments;
          this.hotComments = response.data.hotComments;
          this.total = response.data.total;
          this.$bus.$emit('total',this.total)
          
        });
        }
    },
    mounted() {
       this.$bus.$on('comment', (el,index,type) => {
         this.m_id = el;
         this.str = index;
         this.type_num = type;
       })

       
    },
    
    
}
</script>

<style lang="less" scoped>
.head {
  float: left;
  width: 50px;
  height: 50px;
  margin-right: -100px;
  img {
    float: left;
    width: 50px;
    height: 50px;
    margin-right: -100px;
  }
}
.cntwrap {
  margin-left: 60px;
}
.rp {
  margin-top: 15px;
  text-align: left;
}

.cnt1 {
  text-align: left;
  a {
    color: #0c73c2;
  }
}
.cnt2 {
  margin: 16px 0 0;
  .time {
    float: left;
    text-align: left;
    color: #999;
  }
  .zan {
    float: left;
    a {
      display: inline-block;
    }
  }
}
.iconzan {
  margin-top: -4px;
  display: inline-block;
  width: 15px;
  height: 14px;
  background: url(../images/icon2.png) no-repeat -150px 0;
  vertical-align: middle;
}
.sep {
  float: left;
  color: #ccc;
  margin: 0 10px;
}
.r-zan {
  float: right;
}
.reply {
  float: left;
}
.ReplyArea {
  position: relative;
  margin: 10px 0 0 0;
  padding: 8px 19px;
  line-height: 20px;
  background: #f4f4f4;
  border: 1px solid #dedede;
  text-align: left;
}
.s-fc7 {
  margin-right: 5px;
  color: #0c73c2;
  line-height: 20px;
}
 .u-title {
  height: 34px;
  border-bottom: 2px solid #c20c0c;
  h3 {
    float: left;
    line-height: 28px;
    font-weight: normal;
    font-size: 20px;
  }
}
.sub {
  float: left;
  margin: 9px 0 0 20px;
  color: #666;
}
.iptarea {
  position: relative;
  margin-bottom: 20px;
}
.head1 {
  float: left;
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
.u-txtwrap {
  margin-left: 62px;
  position: relative;
  padding: 0 14px 0 0;
}
#text-f {
  height: 50px;
  width: 100%;
  padding: 5px 6px 6px;
  border-radius: 2px;
  line-height: 19px;
  box-sizing: content-box;
  outline: none;
  border: 1px solid #cdcdcd;
  resize: none;
  overflow: auto;
}
.f-c {
  padding-top: 10px;
  position: relative;
  a {
    float: right;
    width: 46px;
    height: 25px;
    color: #fff;
    text-align: center;
    line-height: 25px;
    background: url(../images/button.png) no-repeat -84px -64px;
  }
}
.zs {
  float: right;
  margin-right: 10px;
  line-height: 25px;
  color: #999;
}
.corr {
  position: absolute;
  width: 13px;
  height: 15px;

  top: 4px;
  left: 56px;
}
.arrclr {
  display: block;
  margin: -36px 0 0 1px;
  color: #fff;
  font-size: 24px;
  height: 10px;
}
.arrline {
  display: block;
  color: #cdcdcd;
  font-size: 24px;
}
.rept {
  position: relative;
  margin: 18px 0 15px 0;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}
.iner {
  padding: 15px;
  padding: 15px 31px 15px 15px;
  background: #f8f8f8;
  border: 1px solid #fcfcfc;
  border-radius: 2px;
}
#auto-id {
  resize: none;
  padding: 5px 6px 6px;
  width: 100%;
  outline: none;
  line-height: 19px;
  border: 1px solid #cdcdcd;
  border-radius: 2px;
  box-sizing: content-box;
  height: 20px;
}
.b-f {
  padding-top: 10px;
  a {
    float: right;
    width: 46px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    color: #fff;
    background: url(../images/button.png) no-repeat -84px -64px;
  }
}
.words {
  float: right;
  margin: 5px 7px 0 0;
}
.tips {
  position: fixed;
  margin: 495px 0 0 -116px;
  top: 20px;
  left: 50%;
  width: 214px;
  height: 40px;

  background: #fff;
  line-height: 40px;
  box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.3);
  z-index: 99;
}
.separate {
  margin-top:10px ;
  height: 21px;
  text-align: left;
}
.textarea {
  color: #333;
}
.zanNum {
  margin: 0 0 0 6px;
}
.u-page {
  margin: 20px 0;
  text-align: center;
}
.zbtn {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-left: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat 0 -560px;
  text-align: left;
  &:hover {
    background: url(../images/button.png) no-repeat 0 -590px;
    color: inherit;
  }
}

.zpr {
  color: #cacaca;
  cursor: default;
}

.znxt {
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  width: 47px;
  height: 24px;
  padding-right: 22px;
  line-height: 24px;
  background: url(../images/button.png) no-repeat -75px -560px;

  cursor: default;
  text-align: right;
  cursor: pointer;
  &:hover {
    background: url(../images/button.png) no-repeat -75px -590px;
    color: inherit;
  }
}
.zpgi {
  height: 22px;
  padding: 0 8px;
  background-color: #fff;
  line-height: 22px;
  margin: 0 1px 0 2px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: url(../images/button.png) no-repeat 0 9999px;
  
  &:hover {
    border: 1px solid #000;
  }
}
.r-zan {
  float: right;
}
.m-cmmt {
  margin-top: 20px;
}
.itm {
  padding: 15px 0;
  border-top: 1px dotted #ccc;
}
.n-cmt {
  margin-top: 40px;
}
// .off-focus {
//   position: absolute;
//   left: 0px;
//   top: 0px;
//   z-index: 10;
//   width: 100%;
//   height: 100%;
// }

</style>